<template>
  <view class="relative" :style="pStyle + boxStyle">
    <image :src="src + '?x-oss-process=image/resize,h_' + height + ',w_' + width" :mode="mode" :style="(loadStatus === 1 ? pStyle : beforeLoadStyle) + (transOpacity ? transitionStyle : '')" @click="handleClick" @load="handleLoad" @error="handleError" />
    <!-- 占位图 -->
    <image v-if="loadStatus === -1 && placeholder" :src="placeholder" :mode="mode" :style="pStyle" />
    <view v-if="loadStatus === -1 && !placeholder" :style="pStyle + 'background-color:#f0f0f0'" />
    <!-- 失败图 -->
    <image v-if="loadStatus === 0 && err" :src="err" :mode="mode" :style="pStyle" />
    <view v-if="loadStatus === 0 && !err" :style="pStyle + 'background-color:#f0f0f0'" />
  </view>
</template>

<script>
export default {
  props: {
    /*
			 图片地址 不要带oss了
			 */
    src: {
      type: String,
      required: true
    },
    /*
			 图片裁剪、缩放的模式
			 */
    mode: {
      type: String,
      default: 'scaleToFill'
    },
    /*
			 加载前的占位图，如果不传就默认一个灰色背景
			 */
    placeholder: {
      type: String,
      default: ''
    },
    /*
			 加载失败的展示，如果不传就默认占位图
			 */
    err: {
      type: String,
      default: ''
    },
    /*
			 图片高度，rpx单位，必传
			 */
    height: {
      type: Number,
      required: true
    },
    /*
			 图片宽度，rpx单位，必传
			 */
    width: {
      type: Number,
      required: true
    },
    /*
			 圆角
			 */
    radius: {
      type: String,
      default: '0'
    },
    /*
			 自定义样式
			 */
    customStyle: {
      type: String,
      default: ''
    },
    /*
			 透明度
			 */
    opacity: {
      type: Number,
      default: 1
    },
    /*
		 透明度是否有渐变动画
		 */
    transOpacity: {
      type: Boolean,
      default: false
    },
    /*
		 动画时长
		 */
    transitionDuration: {
      type: Number,
      default: 0.5
    },
    /*
		 动画方式
		 */
    transitionFunc: {
      type: String,
      default: 'ease'
    },
    /*
		 盒子的样式 一般是padding 和 margin
		 */
    boxStyle: {
      type: String,
      default: ''
    }
  },
  computed: {
    pStyle() {
      let _style = `border-radius:${this.radius};opacity:${this.opacity};`
      _style += `height:${this.height}%;`
      _style += `width:${this.width}%;`
      return _style + this.customStyle
    },
    transitionStyle() {
      return `transition:opacity ${this.transitionDuration}s ${this.transitionFunc};`
    }
  },
  data() {
    return {
      beforeLoadStyle: 'position:absolute;opacity:0;width:0;height:0',
      loadStatus: -1 // 图片加载状态， -1 初始 ； 0 失败 ； 1 加载完成
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
    handleLoad(e) {
      this.loadStatus = 1
      this.$emit('load', e)
    },
    handleError(e) {
      this.loadStatus = 0
      this.$emit('error', e)
    }
  }
}
</script>

<style lang="scss" scoped>
	.relative{
		position: relative;
	}
</style>
